<template>
  <Card>
      <Row type="flex">
        <Col span="10" order="1">
        <marvels-viewer :data="viewerData" :attachMents="attachMents" :fileParam="fileParam" :isScroll="isScroll"></marvels-viewer>
        </Col>
        <Col span="14" order="2">

          <Row>
              <Col>
                <!-- 右上客户信息表格 -->
                <Table :columns="columns1" :data="headData"></Table>
              </Col>
          </Row>
          </br>
          <Row>
            <Col style="display: block;width:80%" order="2">
            <form id="chargeForm">
              <table cellspacing="0" border="1" bordercolor="#000000" style="border:darkgrey;width:125%;">
                <tr style="height:50px">
                    <td colspan="2">
                      <span style="font-size:16px;"></span>
                        <span style="font-size:16px;">&nbsp;&nbsp;&nbsp;退回说明</span>
                      </strong><br />
                    </td>
                  </tr>
                <tr>
                  <td style="text-align: -webkit-center;height:40px">
                    退回原因
                  </td>
                  <td>
                    <CheckboxGroup v-model="chargebackRes" style="margin-left: 30px;">
                        <Checkbox v-for="item in opinionTypes" :key="item.id" :label="item.opinionTypeCode">
                          <span>{{item.opinionTypeName}}</span>
                        </Checkbox>
                      </CheckboxGroup>
                  </td>
                </tr>
                <tr>
                  <td style="text-align: -webkit-center;">
                    退单原因说明
                  </td>
                  <td>
                    <textarea v-model="chargebackDesc" style="height:90%;" cols="90" rows="6" placeholder="请输入退单原因描述......."></textarea>
                  </td>
                </tr>
                <tr style="height:40px;">
                    <td colspan="2">
                      <div style="text-align: center;">
                        <Form style="display:inline-block" action="" method="post" name="exportList" id="exportList" enctype="multipart/form-data">
                        <input type="hidden" name="loanId" id="loanId" value="" />
                        <Button type="primary" @click="downLoadFile">下载资料</Button>
                        </Form>
                        <Button type="primary" @click="commitToNextNode">提交下一步</Button>
                        <Button type="primary" @click="handleBack">退单</Button>
                        <Button type="primary" @click="returnToList">返回</Button>
                      </div>
                    </td>
                  </tr>
              </table>
            </form>
            </Col>
          </Row>
          </Col>
      </Row>
       <Modal v-model="commitModal" title="提示" @on-ok="commitToUpload" @on-cancel="cancelCommit">
            <p>确定将该业务提交至征信报告上传阶段？</p>
      </Modal>
  </Card>

</template>

<script>
import { formatDate } from '@/common/js/date.js'
import marvelsViewer from '../../components/marvels-viewer.vue'
import attachmentTypeData from '../../components/attachment-type-data.js'
export default {
  components: {
    marvelsViewer
  },
  data () {
    return {
      loanId: this.$route.query.loanId,
      commitModal: false,
      isScroll: false,
      chargebackRes: [],
      opinionTypes: [],
      chargebackDesc: '',
      // 封装用户基本信息对象
      params: {
        custName: '',
        productName: '',
        channel: '',
        employeeName: '',
        createdDate: ''
      },
      treeData: [],
      viewerData: [],
      fileParam: {
        url: '',
        isShow: false
      },
      attachMents: [],
      columns1: [{
        align: 'center',
        title: '客户姓名',
        key: 'custName'
      },
      {
        align: 'center',
        title: '产品名称',
        key: 'productName'
      },
      {
        align: 'center',
        title: '所属渠道',
        key: 'channelName'
      },
      {
        align: 'center',
        title: '客户经理',
        key: 'employeeName'
      },
      {
        align: 'center',
        title: '上报日期',
        key: 'createdDate'
      }
      ],
      headData: []
    }
  },
  computed: {

  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    // 组织机构树节点点击事件
    handleSelectChange (val) {
      var vm = this
      var node = val[0]
      if (node.url) {
        vm.src = node.url
      }
    },
    returnToList () {
      this.$router.back()
    },
    handleBack () {
      if (!this.chargebackRes || this.chargebackRes.length < 1) {
        this.$Message.warning('请勾选退回原因')
        return
      }
      var config = {
        title: '提示',
        content: '是否确定退单?',
        onOk: this.chargeBack
      }
      this.$Modal.confirm(config)
    },
    chargeBack () {
      var vm = this
      var param = {}
      param.loanId = vm.$route.query.loanId
      var chargebackRes = vm.chargebackRes
      var ReturnCode = ''
      for (var i = 0; i < chargebackRes.length; i++) {
        if (chargebackRes.length - 1 === i) {
          ReturnCode += chargebackRes[i]
        } else {
          ReturnCode += chargebackRes[i] + ','
        }
      }
      param.backReasonCodes = ReturnCode
      param.backReason = this.chargebackDesc
      vm.$ajax.post(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/chargeBack', param).then(res => {
        var data = res.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          this.$Message.success(message)
          this.$router.back()
        } else {
          this.$Message.warning(message)
        }
      }).catch(er => {
      })
    },

    // 下载影像资料附件
    downLoadFile () {
      var vm = this
      var loanId = vm.loanId
      document.getElementById('exportList').action = vm.$appContext.marvels_core_approve + 'approve/credit/report/service/downLoadMedia'
      // console.log(document.getElementById('exportList').action)
      document.getElementById('loanId').value = loanId
      document.getElementById('exportList').submit()
      // vm.$ajax.get(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/downLoadMedia', {
      //   params: {
      //     loanId: loanId
      //   },
      //   responseType: 'string'
      // }).then(res => {
      //   debugger
      // }).catch(er => {
      // })
    },

    // 提交到征信报告上传节点
    commitToNextNode () {
      var vm = this
      vm.commitModal = true
    },

    // 提交到征信上传阶段
    commitToUpload () {
      var vm = this
      var loanId = vm.loanId
      vm.$ajax.post(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/commitToUpload', {
        loanId: loanId
      }).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          this.$Message.success(message)
          vm.$router.go(-1)
        } else {
          this.$Message.warning(data.data === null || data.data === '' ? message : data.data)
        }
      }).catch(er => {
      })
    },
    // 取消提交
    cancelCommit () {

    },
    initPage () {
      var vm = this
      var loanId = this.$route.query.loanId
      // 查询
      vm.$ajax.get(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/userInfo', {
        params: {
          loanId: loanId
        }
      }).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          if (data.data.userInfo) {
            data.data.userInfo.createdDate = this.$util.formatTime(data.data.userInfo.createdDate)
            vm.headData = [data.data.userInfo]
            vm.opinionTypes = data.data.opinionTypes
          } else {
            vm.$Message.warning('该笔单据没有订单信息')
          }
          if (data.data.media) {
            vm.initMediaData(data.data.media)
          } else {
            vm.$Message.warning('该笔单据没有影响资料')
          }
        } else {
          vm.$Message.warning(message)
        }
      }).catch(er => {

      })
    },
    initMediaData (data) {
      var list = []
      if (data && data.length > 0) {
        var baseSrc = this.$appContext.marvels_core_approve + 'approve/credit/intbank/service/loadAttachmentById/'
        for (var i = 0; i < data.length; i++) {
          var viewAttach = {}
          viewAttach.label = data[i].atmtTypeName
          var attachmentList = data[i].laAttachmentDTOList
          var viewList = []
          if (attachmentList && attachmentList.length > 0) {
            for (var j = 0; j < attachmentList.length; j++) {
              let label = attachmentTypeData[attachmentList[j].atmtType] + '_' + (j + 1)
              if ((attachmentList[j].atmtType === 'A' || attachmentList[j].atmtType === 'YH') && attachmentList[j].fileName !== '' && attachmentList[j].fileName !== null) {
                label = attachmentList[j].fileName
              }
              let fileLocation = attachmentList[j].fileLocation
              if (!fileLocation) fileLocation = ''
              let fileName = attachmentList[j].fileName
              if (!fileName) fileName = ''
              viewList.push({
                label: label,
                src: baseSrc + attachmentList[j].id,
                type: fileLocation.substring(fileLocation.lastIndexOf('.') + 1),
                fileType: attachmentList[j].atmtType,
                url: fileLocation
              })
            }
            viewAttach.children = viewList
            list.push(viewAttach)
          }
        }
      }
      this.viewerData = list
    }
  },
  mounted () {

  },
  created: function () {
    this.$ajax = this.$util.ajax()
    this.initPage()
  }
}
</script>
